Wprowadzenie

Pętle (loops) pozwalają na wykonywanie tych samych czynności w kółko określoną liczbę razy, albo dla określonego zestawu elementów.

Pętla for

Pętla for pozwala wykonywać fragment kodu wiele razy, np. 5 razy lub tyle razy, ile jest elementów w tablicy.

Przykład 1

for( let i = 0; i < 3; i++ ){
  console.log('Loop iteration: ' + i);
}

Powyższa pętla wykona się 3 razy i tyle razy wyświetli w konsoli zdefiniowany tekst.

Przykład 2

const elementsList = ['lorem', 123, 3+'c', '999'];

for( let i = 0; i < elementsList.length; i++ ){
  if(typeof(elementsList[i]) == 'string'){
    console.log('Text from an element from elementsList at index ' + i + ' is: ' + elementsList[i]);
  }
}

Powyższa pętla wykona się dla każdego elementu w tablicy elementsList i wyświetli w konsoli wartość tego elementu.

Więcej informacji

Składnia

for( initialization; condition; expression ){
  // ...
}

Deklaracja pętli for składa się z trzech elementów:

  • initialization – wyrażenie wykonywane tylko raz, w momencie uruchomienia pętli,

  • condition – warunek działania pętli, sprawdzany po każdej iteracji ("obrocie") pętli,

  • expression – wyrażenie wykonywane po każdej iteracji pętli.

    Zakresem zmiennych, zdefiniowanych w initialization, jest blok { } tej pętli.

    Warunek jest sprawdzany również przed pierwszym wykonaniem pętli, czyli w poniższym przykładzie kod w pętli nigdy się nie wykona.

    for( let i = 1; i < 0; i++ ){
console.log('This message will not be displayed');
}

    Ostrzeżenie

    Istnieje również ryzyko stworzenia nieskończonej pętli, jeśli w tym przykładzie zmienilibyśmy warunek na i > 0. Skoro po każdej iteracji i się zwiększy, to ten warunek będzie zawsze prawdziwy, więc pętla – teoretycznie – nigdy nie skończy się "kręcić". W praktyce, po pewnym czasie przeglądarka zgłosi błąd.

Pętla for...in

Pętla for...in umożliwia wykonywanie operacji dla każdego elementu w obiekcie.

Przykład

const person = {
  name: 'John',
  surname: 'Doe',
  age: 35
};

for( let key in person ){
  console.log('Value at key "' + key + '" in person: ' + person[key]);
}

Powyższa pętla wyświetli w konsoli wartości kolejnych elementów obiektu person.

Pętla for...of

Pętla for...of umożliwia wykonywanie operacji na obiektach iterowalnych, takich jak tablice lub mapy.

Przykład

const animals = ['Cat', 'Dog', 'Mouse', 'Bird'];

for( let animal of animals ){
  console.log(animal);
}

Powyższa pętla wyświetli w konsoli każdy element zawarty w tablicy animals.

Pętla while

Pętla while za każdą iteracją sprawdza zdefiniowany warunek i wykonuje żądany blok kodu tak długo, jak długo warunek jest prawdziwy.

Przykład 1

let i = 0;

while (i < 10) {
 console.log(i);
 i++;
}

Powyższa pętla będzie iterować tylko tak długo, jak długo i będzie mniejsze niż 10. W rezultacie wyświetli w konsoli liczby od 0 do 9.

Przykład 2

let i = 15;

while (i < 10) {
 console.log(i);
 i++;
}

W powyższej pętli warunek od razu zostanie uznany za fałszywy, więc pętla nie zwróci wyniku.

Pętla do...while

Pętla do...while jest podobna do powyższej – będzie się wykonywać tak długo, jak długo zdefinowany warunek będzie spełniony. Różnica jest taka, że pętla do...while zawsze wykona się przynajmniej raz, ponieważ warunek (while) jest sprawdzany po wykonaniu instrukcji (do).

Przykład 1

let i = 0;

do {
  console.log(i);
  i++;
} while (i < 10);

Powyższa pętla będzie iterować tylko tak długo, jak długo i będzie mniejsze niż 10. W rezultacie wyświetli w konsoli liczby od 0 do 9.

Przykład 2

let i = 15;

do {
  console.log(i);
  i++;
} while (i < 10);

Powyższa pętla wykona jedną iterację i wyświetli w konsoli wynik (wartość zmiennej i). Następnie przerwie działanie.

PREVIOUS
Warunki
NEXT
Funkcje